<template>
    <div class="chartBox">
        <div class="tabBox">
            <t-scroll>
            <span :class="{'selected':tabIndex==1}" @click="reGet(1)" v-t="'income.text1'">My trading income</span>
            <span :class="{'selected':tabIndex==2}" @click="reGet(2)" v-t="'income.text3'">My Advertising Income</span>
            <span :class="{'selected':tabIndex==4}" @click="reGet(4)" v-t="'income.text4'">My Operation Placement Income</span>
            <span :class="{'selected':tabIndex==3}" @click="reGet(3)" v-t="'income.text5'">My Other Income</span>
            </t-scroll>
        </div>
        <div v-if="showChart" id="charts"></div>
        <div v-else class="notData" v-t="'dataNo'">No Data</div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import * as echarts from 'echarts';
import TScroll from '@/components/Tscroll.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
        TScroll
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            tabIndex:1,
            myChart:'',
            xAxisDatas:[],
            seriesDatas:[],
            showChart:true
        })

        onMounted(()=>{
            getTradeIncomeChartData()
        })

        const getTradeIncomeChartData = ()=>{ // 交易收入
            state.showChart = true
            state.xAxisDatas = []
            state.seriesDatas = []
            store.dispatch('capital/get_my_trade_income_chart',{ 
                walletAddress:state.userInfo.walletAddress
            }).then(res =>{
                if(res.data && res.data.length>0){
                    res.data.forEach(item => {
                        state.xAxisDatas.push(item.month.replace(/-/g,""))
                        state.seriesDatas.push(item.amount.num)
                    });
                    createChart()
                }else{
                    state.showChart = false
                }
            })
        }

        const getAdIncomeChartData = ()=>{ // 广告收入
            state.showChart = true
            state.xAxisDatas = []
            state.seriesDatas = []
            store.dispatch('capital/get_my_ad_income_chart',state.userInfo.walletAddress).then(res =>{
                if(res.data && res.data.length>0){
                    res.data.forEach(item => {
                        state.xAxisDatas.push(item.timeName)
                        state.seriesDatas.push(item.awardBonus.num)
                    });
                    createChart()
                }else{
                    state.showChart = false
                }
            })
        }

        const getOtherIncomeChartData = ()=>{ // 其他收入
            state.showChart = true
            state.xAxisDatas = []
            state.seriesDatas = []
            store.dispatch('capital/get_my_other_income_chart',{ 
                walletAddress:state.userInfo.walletAddress
            }).then(res =>{
                if(res.data && res.data.length>0){
                    res.data.forEach(item => {
                        state.xAxisDatas.push(item.month)
                        state.seriesDatas.push(item.amount.num)
                    });
                    createChart()
                }else{
                    state.showChart = false
                }
            })
        }

        const reGet = (index)=>{
            state.tabIndex = index
            if(index==1){
                getTradeIncomeChartData()
            }else if(index==2){
                getAdIncomeChartData()
            }else if(index==3){
                getOtherIncomeChartData()
            }else{
                state.showChart = false
            }
        }

        const createChart = ()=>{
            // 基于准备好的dom，初始化echarts实例
            let vcele = ''
            const ele = echarts.getInstanceByDom(document.getElementById('charts'))
            if(ele == null){
                vcele = echarts.init(document.getElementById('charts'))
            }else{
                vcele = ele
            }
            
            // 绘制图表
            vcele.setOption({  // 直接使用state.myChart，则鼠标移上不显示内容
                tooltip: {
                    trigger: 'axis', // 鼠标移上出现十字线
                    showContent:true
                },
                grid: { // 设置图形四周留白大小
                    left: '40px',
                    right: '40px',
                    bottom: '40px',
                    top:'40px'
                },
                // legend: {
                //     bottom:0,
                //     textStyle:{color:'#fff'},
                //     data: ['UV', 'PV']
                // },
                xAxis: {
                    axisLabel:{
                        show: true, 
                        textStyle:{color:'#fff'},
                    },
                    data: state.xAxisDatas//['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    axisLabel:{
                        show: true, 
                        textStyle:{color:'#fff'},
                    },
                    type:'value',
                    splitLine: {
                        show: true,
                        lineStyle:{
                            type:'dashed',
                            color:'#4C6FA2'
                        }
                    } 
                },
                series: [
                    {
                        name: 'Income',
                        type: 'line',
                        data: state.seriesDatas//[5, 20, 36, 10, 14, 20,9, 39, 11, 5, 8, 16]
                    }
                ]
            });
        }
      

        return{
            ...toRefs(state),
            reGet
        }
    }
}
</script>

<style lang="scss" scoped>
    .chartBox{
        display: flex;
        width: 100%;
        height: 450px;
        flex-flow: column;
        font-family: Inter-Semi Bold, Inter;
        font-weight: normal;
        line-height: normal;
        #charts{
            flex: 1;
            margin: -40px 0 0 0;
        }
        .tabBox{
                height: 60px;
                line-height: 60px;
                padding: 0;
                text-align: center;
                span{
                    //flex: 1;
                    display: inline-block;
                    color: rgba(103,248,255,0.3000);
                    font-size: 24px;
                    font-weight: bold;
                    text-align: center;
                    position: relative;
                    z-index: 10;
                    &::after{
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 150px;
                        height: 4px;
                        margin: 0 0 0 50%;
                        transform: translate(-50%,0);
                        -webkit-transform: translate(-50%,0);
                    }
                    &+span{
                        margin-left: 30px;
                    }
                    &.selected{
                        color: #67F8FF;
                        &::after{
                            background:#67F8FF;
                        }
                    }
                }
        }
        .notData{
            text-align: center;
            padding: 100px 0 0 0;
        }
    }
</style>